<template>
  <div class="home">
    <!-- <gltitle
        :is_mt="true"
        :is_notice="false"
        :is_back="true"
        :is_name="true"
        :title="title"
        :is_right="true"
        :titleRight="titleRight"
        @preserve="path_url('/my/lang')"
    ></gltitle> -->

    <div class="head">
      <div class="container">
        <div class="db">
          <div class="logo">{{ $t("title.doc63") }}</div>
          <div class="close">
            <img
              @click="retreat()"
              src="../../assets/images/closeicon.png"
              alt=""
            />
          </div>
        </div>
        <!--        <div class="db">-->
        <!--          <div class="close">-->
        <!--            <img-->
        <!--                @click="retreat()"-->
        <!--                src="../../assets/images/closeicon.png"-->
        <!--                alt=""-->
        <!--            />-->
        <!--          </div>-->
        <!--        </div>-->
      </div>
    </div>

    <div class="container">
      <div class="logo">
        <div class="title">{{ $t("title.doc64") }}</div>
        <div class="remark">{{ $t("title.doc65") }}</div>
        <ul>
          <li>
            <div class="name">{{ $t("page1.doc72") }}</div>
            <div class="input">
              <input
                type="text"
                :placeholder="$t('page1.doc65')"
                v-model="mobile"
              />
            </div>
          </li>
          <li>
            <div class="name">{{ $t("page1.doc27") }}</div>
            <div class="input">
              <div class="in">
                <input
                  type="text"
                  :placeholder="$t('page1.doc28')"
                  v-model="code"
                />
              </div>
              <div class="str" v-if="!time_show" @click="send_click()">
                {{ $t("page1.doc29") }}
              </div>
              <div class="str" v-show="time_show">
                <van-count-down
                  ref="countDown"
                  :time="time"
                  format="ss"
                  @finish="finish_time"
                >
                  <template v-slot="timeData">
                    <span>{{ timeData.seconds }} <var>s</var></span>
                  </template>
                </van-count-down>
              </div>
            </div>
          </li>
          <li>
            <div class="name">{{ $t("page1.doc30") }}</div>
            <div class="input">
              <input
                type="password"
                :placeholder="$t('page1.doc31')"
                v-model="password"
              />
            </div>
          </li>
        </ul>
        <button class="btn" @click="onBtn()" :disabled="isDisable">
          {{ $t("page.doc83") }}
        </button>
      </div>
    </div>

    <!--    <div class="container">-->
    <!--      <div class="box db">-->
    <!--        <div class="flexs">-->
    <!--          <ul>-->
    <!--            <li class="db">-->
    <!--              <div class="area_name" @click="if_area = true">-->
    <!--                +{{ areaId }}-->
    <!--                <van-icon name="arrow-down" />-->
    <!--              </div>-->
    <!--              <div class="flexs">-->
    <!--                <input-->
    <!--                  type="text"-->
    <!--                  :placeholder="$t('page.doc35')"-->
    <!--                  v-model="mobile"-->
    <!--                />-->
    <!--              </div>-->
    <!--            </li>-->
    <!--            <li class="db">-->
    <!--              <div class="flexs">-->
    <!--                <input-->
    <!--                  type="text"-->
    <!--                  :placeholder="$t('page.doc36')"-->
    <!--                  v-model="code"-->
    <!--                />-->
    <!--              </div>-->
    <!--              <div class="str" v-if="!time_show" @click="send_click()">-->
    <!--                {{ $t("page.doc37") }}-->
    <!--              </div>-->
    <!--              <div class="str" v-show="time_show">-->
    <!--                <van-count-down-->
    <!--                  ref="countDown"-->
    <!--                  :time="time"-->
    <!--                  format="ss"-->
    <!--                  @finish="finish_time"-->
    <!--                >-->
    <!--                  <template v-slot="timeData">-->
    <!--                    <span>{{ timeData.seconds }} <var>s</var></span>-->
    <!--                  </template>-->
    <!--                </van-count-down>-->
    <!--              </div>-->
    <!--            </li>-->
    <!--            <li class="db">-->
    <!--              <div class="flexs">-->
    <!--                <input-->
    <!--                  type="password"-->
    <!--                  :placeholder="$t('page.doc38')"-->
    <!--                  v-model="password"-->
    <!--                />-->
    <!--              </div>-->
    <!--            </li>-->
    <!--            <li class="db">-->
    <!--              <div class="flexs">-->
    <!--                <input-->
    <!--                  type="password"-->
    <!--                  :placeholder="$t('page.doc39')"-->
    <!--                  v-model="s_password"-->
    <!--                />-->
    <!--              </div>-->
    <!--            </li>-->
    <!--          </ul>-->
    <!--        </div>-->
    <!--      </div>-->

    <!--      <div class="bottom">-->
    <!--        <div class="go">-->
    <!--          <button class="btn" @click="onBtn()">{{ $t("page.doc40") }}</button>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->

    <van-popup v-model="if_area" position="bottom" round>
      <div class="area_pop">
        <div class="title rel">
          {{ $t("page.doc41") }}
          <div class="abs" @click="if_area = false">
            <van-icon name="cross" />
          </div>
        </div>
        <div class="so db">
          <div class="ico"></div>
          <div class="flexs">
            <input
              type="text"
              :placeholder="$t('page.doc42')"
              v-model="soAreaId"
            />
          </div>
          <div class="closes" v-if="soAreaId != ''" @click="soAreaId = ''">
            <img src="../../assets/images/ico_close.png" alt="" />
          </div>
        </div>
        <ul>
          <li
            class="db"
            v-for="(item, k) in searchResult"
            :key="k"
            @click="area_set(item.mobilePrefix)"
          >
            <div class="ico">
              <img :src="item.iconUrl" alt="" />
            </div>
            <div class="flexs txt">
              {{ item.name }}（+{{ item.mobilePrefix }}）
            </div>
          </li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapActions, mapMutations } from "vuex";
import { antiShake } from "@/utils/fun.js"; //防抖
const phoneReg = /^1[3-578]\d{9}$/; //大陆手机验证
const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
const mailReg = /^(\w-*\.*\+*)+@(\w-?)+(\.\w{2,})+$/; //邮箱验证

export default {
  data() {
    return {
      title: "",
      titleRight:
        "<img src=" +
        require("../../assets/images/ico_lang.png") +
        ">" +
        this.$t("page.doc43"),

      tabData: [
        { name: this.$t("page.doc95"), cid: 1 },
        { name: this.$t("page.doc94"), cid: 0 },
      ],
      cid: 1,

      areaId: "44",
      phone: "",
      mobile: "",
      email: "",
      cap: "",
      code: "",
      invateCode: "",
      password: "",
      s_password: "",

      areaData: [],
      if_area: false,

      time: 60 * 1000,
      time_show: false,
      time_status: false,
      checked: true,

      registration_data: {
        pwdType: "password",
      },
      isDisable: false,

      soAreaId: "",
      isUa: "",
    };
  },
  computed: {
    searchResult() {
      if (this.soAreaId != "") {
        return this.areaData.filter(
          (item) => item.mobilePrefix.indexOf(this.soAreaId) > -1
        );
      } else {
        return this.areaData;
      }
    },
  },
  watch: {
    soAreaId: {
      immediate: true, //在框的值还没变化时执行如下函数显示出所有的情况
      handler(val) {
        this.code_data = this.areaData.filter((p) => {
          return p.mobilePrefix.indexOf(val) !== -1;
        });
      },
    },
  },
  mounted() {
    this.getArea();
    window.getIsApp = this.getIsApp;

    if (this.common.getPlatform == "IOS") {
      try {
        window.webkit.messageHandlers.getIsApp.postMessage(
          JSON.stringify(json)
        );
        if (this.isUa) {
          this.SET_ISAPPINFO(true);
        }
      } catch (error) {
        console.log("ios error");
      }
    } else {
      try {
        this.isUa = window.android.getIsApp();
        if (this.isUa) {
          this.SET_ISAPPINFO(true);
        }
      } catch (error) {
        console.log("Android error");
      }
    }

    if (this.$route.query.inviteCode != undefined) {
      this.invateCode = this.$route.query.inviteCode;
    }
    if (localStorage.getItem("mobile")) {
      this.mobile = localStorage.getItem("mobile");
    }
    if (localStorage.getItem("email")) {
      this.phone = localStorage.getItem("email");
    }
    if (localStorage.getItem("areaId")) {
      this.areaId = localStorage.getItem("areaId");
    }
    if (localStorage.getItem("invateCode")) {
      this.invateCode = localStorage.getItem("invateCode");
    }
  },

  methods: {
    ...mapMutations([
      "SET_USERDATA",
      "SET_TOKEN",
      "SET_LOGIN",
      "SET_MOBILE",
      "SET_EMAIL",
      "SET_AREAID",
    ]),
    ...mapActions(["Get_userData"]),

    retreat() {
      this.$router.go(-1);
    },
    changeType() {
      this.registration_data.pwdType =
        this.registration_data.pwdType === "password" ? "text" : "password";
    },

    onTab(item) {
      this.cid = item.cid;
    },

    finish_time() {
      this.time_status = false;
      this.time_show = false;
    },
    send_click() {
      if (this.time_status) {
        this.$toast.success(this.$t("page.doc44"));
        return;
      }
      // if (this.phone.toString().length < 7 || this.phone.toString().length > 12) {
      //   this.$toast.fail(this.$t('new.doc8'));
      //   return;
      // }
      this.send_code();
    },

    send_code() {
      //判断在不在60秒内
      if (this.time_status) {
        //this.$toast("操作频繁.晚点再试");
        this.$toast.success(this.$t("page.doc44"));
      } else {
        if (this.cid == 0) {
          if (
            this.mobile.toString().length < 6 &&
            this.mobile.toString().length < 13
          ) {
            //this.$toast("请输入正确的手机号");
            this.$toast.fail(this.$t("page.doc45"));
            return;
          }
        } else {
          if (!mailReg.test(this.mobile.replace(/\s+/g, ""))) {
            //this.$toast(this.$t('page.doc46'));
            this.$toast.fail(this.$t("page.doc46"));
            return;
          }
        }

        var send_api = this.URL.user.code_send;
        var send_arr = {
          accountType: this.cid,
          prefix: this.areaId,
          account: this.mobile.replace(/\s*/g, ""),
          type: 6, // 设置/更新密码
          captchaKey: this.captchaKey,
          captchaCode: this.cap,
        };

        this.$post(send_api, send_arr).then((res) => {
          if (res.code == 0) {
            this.$toast.success(this.$t("page.doc47"));
            // this.code = res.data.code
            this.time_show = true;
            this.time_status = true;
            this.$refs.countDown.reset();
            this.$refs.countDown.start();
          } else {
            this.$toast(res.message);
          }
        });
      }
    },

    area_set(id) {
      this.areaId = id;
      this.if_area = false;
    },
    getArea() {
      // this.if_area = true
      this.$post(this.URL.user.country_list, {}).then((res) => {
        if (res.code == 0) {
          this.areaData = res.data;
          this.areaId = res.data[0].mobilePrefix;
        } else {
          this.$toast(res.message);
        }
      });
    },

    onBtn: antiShake(function () {
      // this.isDisable = true
      // setTimeout(() => {
      //   this.isDisable = false
      // }, 2000)

      // if (!this.isDisable) {
      //   return
      // }

      if (
        !this.cid &&
        this.mobile.toString().length < 6 &&
        this.mobile.toString().length < 13
      ) {
        //this.$toast("请输入正确的手机号");
        this.$toast.fail(this.$t("page.doc45"));
        return;
      }

      if (this.cid && !mailReg.test(this.mobile.replace(/\s+/g, ""))) {
        this.$toast.fail(this.$t("page.doc46"));
        return;
      }
      let re = new RegExp(reg);
      if (re.test(this.password)) {
      } else {
        //密码应为6-20位字母、数字组合字符
        this.$toast(this.$t("page.doc48"));
        return;
      }

      // if (this.password != this.s_password) {
      //   // 两次密码输入不一致
      //   this.$toast(this.$t('page.doc49'))
      //   return
      // }

      this.$post(this.URL.user.forget, {
        accountType: this.cid, //送验证码的账号类型(0-手机 / 1-邮箱)
        prefix: this.areaId, //手机号码前缀 (accountType=0 时必填)
        account: this.mobile, //手机号/邮箱
        code: this.code, //验证码 (验证码类型: 3)
        password: this.$md5(this.password),
      }).then((res) => {
        if (res.code == 0) {
          this.$toast(res.message);
          this.path_url("/user/login");
        } else {
          this.$toast(res.message);
        }
      });
    }),
    path_url(url, id) {
      this.$router.push({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  min-height: 100vh;
}

.head {
  padding: 0.22rem 0;

  .container {
    .db {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      font-size: 0.34rem;
      color: #ffffff;

      img {
        height: 0.44rem;
      }
    }
  }
}

.logo {
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 400;
  color: #ffffff;

  .title {
    //styleName: 加粗/14;
    font-family: Inter;
    font-size: 14px;
    font-weight: 700;
    color: #f2c409;
  }

  .remark {
    //styleName: 常规/12;
    font-family: Inter;
    font-size: 12px;
    font-weight: 400;
    color: #ffffffcc;
    margin-top: 8px;
  }

  ul {
    //border-top: var(--COborder1);
    //padding: 0rem 0.32rem;
    //background: var(--CObackgroundLinear2);
    border-radius: 0rem 0rem 0.2rem 0.2rem;
    margin: 0.5rem 0rem 0.25rem;

    li {
      padding: 0rem 0rem 0.28rem 0rem;
      //border-bottom: 0.01rem solid rgba(255, 255, 255, 0.1);

      .name {
        font-size: 0.28rem;
        color: var(--COborder2);
        margin-bottom: 0.22rem;
      }

      .input {
        display: flex;
        align-items: center;
        border-radius: 10px;
        background: var(--1, #26292d);
        height: 48px;
        padding-left: 0.28rem;

        input {
          width: 100%;
          height: 0.38rem;
          font-size: 0.28rem;
          font-weight: 400;
          text-align: left;
          color: var(--COborder1);
          background: none;
          border: 0;
          &::placeholder {
            font-size: 0.24rem;
          }
        }

        .in {
          flex: 1;
        }

        .str {
          background: linear-gradient(180deg, #f8f8e0 0%, #f5b975 100%);
          border-radius: 0.16rem;
          padding: 0.12rem;
          text-align: center;
          font-size: 0.24rem;
          font-weight: 400;
          color: #000;

          /deep/ .van-count-down {
            color: var(--COborder3);
          }
        }
      }
    }
  }

  .btn {
    width: 100%;
    font-size: 0.3rem;
    font-weight: 700;
    color: #000;
    border: 0;
    text-align: center;
    padding: 0.25rem 0rem;
    background: linear-gradient(180deg, #f8f8e0 0%, #f5b975 100%);
    border-radius: 0.16rem;
    margin: 0.32rem 0rem 0.52rem 0rem;
  }
}

.container {
  color: #989898;
}

.box {
  height: 70vh;
  width: 100%;

  .flex {
    width: 100%;
  }

  .info {
    padding: 0 0.2rem;
  }

  ul {
    padding-top: 1rem;
    width: 100%;

    li {
      height: 0.88rem;
      background: rgba(0, 0, 0, 0.57);
      border-radius: 0.44rem;
      margin-bottom: 0.4rem;
      padding: 0 0.5rem;

      .area_name {
        border-right: 0.02rem solid #989898;
        padding-right: 0.2rem;
        margin-right: 0.2rem;

        i {
          font-size: 0.24rem;
          margin-left: 0.06rem;
        }
      }

      .str {
        height: 0.88rem;
        background: #585b5e;
        border-radius: 44px;
        margin-right: -0.5rem;
        line-height: 0.88rem;
        padding: 0 0.4rem;
        color: #fff;

        /deep/ .van-count-down {
          color: #fff;
          height: 0.88rem;
          line-height: 0.88rem;
        }
      }

      input {
        width: 100%;
        height: 0.38rem;
        font-size: 0.28rem;
        font-weight: 400;
        text-align: left;
        color: #989898;
        background: none;
        border: 0;
      }
    }
  }
}

.bottom {
  .txt {
    margin-top: 0.4rem;
    text-align: center;

    p {
      padding-bottom: 0.2rem;
    }
  }

  /deep/ .van-checkbox__label {
    color: #9ba0a5;
    font-size: 0.24rem;
  }

  /deep/ .van-checkbox {
    justify-content: center;
  }
}

.close {
  background: red;
  width: 32px;
  height: 32px;
  padding: 5.33px;
  border-radius: 10px;
  background: var(---1, #26292d);
}

.input-wrapper {
  background: var(--1, #26292d);
  padding: 0.24rem 0.32rem;
  border-radius: 0.2rem;
  margin: 24px 0;

  .input {
    display: flex;
    align-items: center;

    input {
      width: 100%;
      height: 0.38rem;
      font-size: 0.28rem;
      font-weight: 400;
      text-align: left;
      color: #bdbdbd;
      background: none;
      border: 0;
    }

    .in {
      flex: 1;
    }

    .str {
      background: linear-gradient(225deg, #ff4565 0%, #ef1746 100%);
      border-radius: 0.3rem;
      padding: 0.12rem 0.24rem;
      color: #fff;
      text-align: center;
      font-size: 0.24rem;
      font-weight: 400;

      /deep/ .van-count-down {
        color: #fff;
      }
    }
  }
}
</style>
